<!-- 检测报告管理 -->
<template>
  <BaseMainSlot :show-btn-box="false">
    <template v-slot:search-box>
      <CategoryBar :categoryList="categoryList" @categoryBar="categorySearch" />
      <el-collapse v-model="activeName" accordion @change="handleChange">
        <el-collapse-item name="1">
          <template slot="title">
            <img src="@/assets/action-bar-icon/add-active.png" style="position:absolute;left:35px" @click.stop="add"
              alt />
            <div class="select-btns search-btns" @click.stop="changeSelect()">
              <i class="el-icon-circle-check"></i>
              <p v-if="activeName === '1'">收起筛选</p>
              <p v-if="activeName === ''">展开筛选</p>
            </div>
          </template>
          <div class="search-btn search-btns" @click.stop="getTableDataList()">
            <i class="el-icon-circle-check"></i>
            <p>查询</p>
          </div>
          <div class="select-box-content">
            <div class="select-box-content-name">报告名称：</div>
            <el-input v-model="reportName" clearable placeholder></el-input>
          </div>
          <div class="select-box-content">
            <div class="select-box-content-name">上传人</div>
            <el-select filterable clearable v-model="staffName" filterable clearable>
              <el-option v-for="(item, index) in staffList" :key="index" :label="item.staffName"
                :value="item.staffName" />
            </el-select>
          </div>
          <div class="select-box-content">
            <div class="select-box-content-name">上传日期</div>
            <el-date-picker v-model="dateList" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" value-format="yyyy-MM-dd" clearable />
            <!-- <el-date-picker v-model="uploadDateTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" clearable /> -->
          </div>
        </el-collapse-item>
      </el-collapse>
    </template>

    <template v-slot:btnsBar></template>
    <template v-slot:table-box>
      <div class="content-box">
        <div v-show="tableData.length == 0">暂无检测报告</div>
        <template v-for="(items, indexs) in tableData">
          <div class="box-item" @click="details(items)" :key="indexs" v-if="items.fileSrcList.length > 0">
            <div class="item-top">
              <i class="item-i"></i>
              <el-tooltip :content="items.reportName || ''" placement="top">
                <span style="display: flex;">报告名称： <div class="reportName">{{ items.reportName || '' }}</div></span>
              </el-tooltip>
              <el-tooltip :content="items.staffName || ''" placement="top">
                <span style="display: flex;">上传人： <div class="reportName" style="width: 60px;">{{ items.staffName || '' }}
                  </div></span>
              </el-tooltip>
              <span>上传时间：{{ items.uploadDateTime || '' }}</span>
            </div>
            <div class="item-right" v-if="items.fileSrcList.length">
              <div v-for="item, index in items.fileSrcList" :key="index" class="img-box">
                <img v-if="item.type !== 'application/pdf'" :src="item.url" alt />
                <div v-if="item.type === 'application/pdf'" class="pdf">
                  <iframe style="width:100%;height:100%;pointer-events: none;" :src="item.url + '#view=FitH,top'"
                    frameborder="0"></iframe>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
      <Pagination :page-size="pageSize" :current-page="currentPage" :total-size="totalSize"
        @changeCurrentPage="changeCurrentPage" />
      <!-- <AddEditDialog
        ref="addEditDialog"
        :now-chance-stau="nowChanceStau"
        :title-text="titleText"
        :edit-object="editObject"
        :show.sync="showAddEditDialog"
        @closeDialog="closeDialog"
        @cancelDialog="cancel"
      />-->
    </template>

    <template v-slot:dialog>
      <el-dialog :title="titleText + '检测报告信息'" :visible.sync="dialogFormVisible" :before-close="cancel" width="40%">
        <el-form ref="formData" label-position="left" :model="formData" class="el-form" :rules="rules">
          <el-form-item label="报告名称: " class="w50p" prop="reportName">
            <el-input v-model="formData.reportName" clearable placeholder></el-input>
          </el-form-item>
          <el-form-item label="报告类型: " class="w50p" prop="reportType">
            <el-select filterable clearable v-model="formData.reportType" filterable clearable>
              <el-option v-for="(item, index) in categoryList" :key="index" :label="item.name" :value="item.reportType" />
            </el-select>
          </el-form-item>
          <el-form-item label="上传人：" class="w50p" prop="staffName">
            <el-select filterable clearable disabled v-model="formData.staffName" filterable clearable>
              <el-option v-for="(item, index) in staffList" :key="index" :label="item.staffName"
                :value="item.staffName" />
            </el-select>
          </el-form-item>
          <el-form-item label="文件:" prop="reportFileIdList" class="w100p">
            <!-- <el-input v-model="formData.templateName" clearable /> -->
            <!-- <EleUploadImage multiple :responseFn="handleResponse" :action="baseurl" :headers="headers" 
              :fileType="['png', 'jpg', 'jpeg', 'pdf']" :isShowSuccessTip="false" v-model="images" /> -->
            <el-upload :action="baseurl" :headers="headers" :on-success="handleResponse" accept=".png,.jpg,.jpeg,.pdf"
              list-type="picture-card" :file-list="fileList">
              <i class="el-icon-plus"></i>
              <div slot="file" slot-scope="{file}">
                <img v-if="file.raw.type !== 'application/pdf'" class="el-upload-list__item-thumbnail" :src="file.url"
                  alt />
                <iframe v-else :src="file.url + '#view=FitH,top'" style="width:148px;height:148px;overflow: hidden "
                  scrolling="no" frameborder="0"></iframe>
                <span class="el-upload-list__item-actions">
                  <!-- <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                    <i class="el-icon-zoom-in"></i>
                  </span> -->
                  <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
            <!-- <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog> -->
          </el-form-item>
        </el-form>
        <div v-if="nowChanceStau !== ''" slot="footer" class="dialog-footer">
          <el-button class="cancelbtn" @click="cancel('formData')">取 消</el-button>
          <el-button class="savebtn" type="primary" @click="save('formData')">保 存</el-button>
        </div>
      </el-dialog>
      <div class="dialog-item" v-if="display === 'block'" :style="{ display: display }">
        <div class="dialog-top">
          <i class="item-i"></i>
          <el-tooltip :content="formListData.reportName || ''" placement="top">
            <span style="display: flex;">报告名称： <div class="reportName" style="width:600px;max-width: 300px;">{{
              formListData.reportName ||
              '' }}</div></span>
          </el-tooltip>
          <span>上传人： {{ formListData.staffName || '' }}</span>
          <span>上传时间：{{ formListData.uploadDateTime || '' }}</span>
          <img class="return" src="@/assets/action-bar-icon/return.png" @click="returnClose" alt />
          <img class="del" src="@/assets/action-bar-icon/del-active.png" @click="delOne(formListData)" alt />
        </div>
        <div class="dialog-box-big" style="width:100%;height:750px;overflow:auto">
          <div v-for=" item, index  in  formListData.fileSrcList " :key="index" class="dialog-box-img-box">
            <el-image v-if="item.type !== 'application/pdf'" style="width: 400px" :src="item.url"
              :preview-src-list="[item.url]">
            </el-image>
            <a :href="item.url" target="downloadFile" :download="formListData.reportName + '.jpeg'" title="点击下载图片"
              style="width:100%">
              <iframe v-if="item.type == 'application/pdf'" :src="item.url + '#view=FitH,top'" frameborder="0"
                style="width:100%,height:100%"></iframe></a>
          </div>
        </div>
      </div>
    </template>
  </BaseMainSlot>
</template>

<script>
import ActionBar from "@/components/ActionBar";
import Pagination from "@/components/Pagination";
import BaseMainSlot from "@/components/BaseMainSlot/newBaseMainSlot.vue";
// import AddEditDialog from "./components/add-edit-dialog.vue";
import { mymixin } from "@/utils/mixins";
import { mapGetters } from "vuex";
import { blobToBase64 } from "@/utils/convert";
import CategoryBar from "@/components/CategoryBar/index.vue";
import EleUploadImage from "vue-ele-upload-image";
import Clickoutside from "element-ui/src/utils/clickoutside";
import pdf from "vue-pdf";
import CMapReaderFactory from "vue-pdf/src/CMapReaderFactory.js";

import inspectionReportApi from "@/api/inspection-management/inspection-report-management";
import DocumentApi from "@/api/document";
import FishVarietyApi from "@/api/basic-info-manage/fishVariety";
import EnumApi from "@/api/enum";
import StaffApi from "@/api/basic-info-manage/staff";
export default {
  name: "HistoryInputPondRecord",
  components: {
    ActionBar,
    Pagination,
    BaseMainSlot,
    // AddEditDialog,
    pdf,
    EleUploadImage,
    CategoryBar
  },
  directives: { Clickoutside },
  mixins: [mymixin],
  data() {
    return {
      fileList: [],
      dialogVisible: false,
      display: "none",
      mnecode: "", //批次编号
      purchaseOrderId: "", //采购订单编号
      fishPondId: "", //养殖鱼塘ID
      fishVarietyId: "", //养殖品种ID
      staffName: "", //投塘人
      dateList: undefined, //投塘日期
      checkedIdList: [],
      fishPondList: [], //全部鱼塘
      FishVarietyData: [], //全部品种
      staffList: [], //全部员工/投塘人
      categoryList: [
        { name: "水质检测报告", id: 0, reportType: "WATERQUALITYMONITORING" },
        { name: "质量自检报告", id: 1, reportType: "QUALITYSELFINSPECTION" },
        { name: "质量法检报告", id: 2, reportType: "QUALITYINSPECTION" },
        // {
        //   name: "质量安全报告",
        //   id: 3,
        //   reportType: "QUALITYANDSAFETYCERTIFICATE"
        // }
      ],
      rules: {
        reportName: [
          { required: true, message: "请输入检验报告名称", trigger: "blur" }
        ],
        reportType: [
          { required: true, message: "请选择检验报告类型", trigger: "change" }
        ],
        staffName: [
          { required: true, message: "请选择上报人", trigger: "change" }
        ],
        reportFileIdList: [
          { required: true, message: "请选择图片上传" }
        ]
      },
      //分类列表
      // categoryList: [
      //   {
      //     categoryName: "鱼苗投入",
      //     status: "UN_COMPLETE"
      //   },
      //   {
      //     categoryName: "成鱼投入",
      //     status: "COMPLETED"
      //   }
      // ],
      showAddEditDialog: false,
      baseurl: this.$baseurl.fileServiceUrl + "base/files/upload",
      formListData: {},
      images: [],
      numPages: 0,
      reportName: "",
      fileIdList: [],
      srcX: [],
      activeName: "1", //控制是否默认展开
      reportType: "WATERQUALITYMONITORING",
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "最近一周",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      }
    };
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission"
    })
  },
  watch: {
    headers: {
      token: sessionStorage.getItem("token"),
      homeBaseId: sessionStorage.getItem("homeBaseId"),
    },
    nowChanceStau: {
      handler(val) {
        if (val === "add") {
          let staffName = sessionStorage.getItem("staffName")
          let staffId = sessionStorage.getItem("staffId")
          let userList = this.staffList.filter(item => {
            return Number(item.staffId) === Number(staffId)
          })
          this.fileList = []
          this.fileIdList = []
          this.$set(this.formData, 'reportFileIdList', [])
          this.$nextTick(() => {
            this.formData = {
              // staffName: sessionStorage.getItem('staffName'),
              // staffId: Number(sessionStorage.getItem('staffId')),
              staffName: userList.length == 0 ? this.staffList[0].staffName : staffName,
              staffId: userList.length == 0 ? this.staffList[0].staffId : Number(staffId),
            }
            if (this.formData.staffId == 1) {
              this.formData.staffName = this.staffList[0].staffName
              this.formData.staffId = this.staffList[0].staffId
            }
            this.$refs['formData'] && this.$refs['formData'].resetFields()
          })
          this.images = [];
        }
      }
    }
  },
  created() { },
  mounted() {
    // this.queryFishVariety();
    // this.queryEnum();
    this.queryStaff();
  },
  methods: {
    getTableDataList() {
      let params = {
        page: this.currentPage,
        size: this.pageSize,
        sortStr: "uploadDateTime",
        order: "desc",
        entity: {
          reportType: this.reportType || undefined,
          reportName: this.reportName || undefined
        }
      };
      if (this.staffName) params.entity.staffName = this.staffName;
      if (this.dateList) {
        params.entity.startTime = this.dateList[0] + ' 00:00:00';
        params.entity.endTime = this.dateList[1] + ' 24:00:00';
      }
      inspectionReportApi.queryPageByCondition(params).then(res => {
        if (res.success) {
          let data = res.data || {};
          this.totalSize = data.totalElements;
          // 赋值数组
          this.tableData = data.content;
          this.tableData.forEach((item, index) => {
            if (item.reportFileIdList !== null) {
              let fileSrcList = [];
              item.reportFileIdList.forEach(async (items, indexs) => {
                let obj = await this.queryImgUrl(items, index);
                if (obj.url) {
                  fileSrcList.push({
                    id: items,
                    url: obj?.url,
                    urls: obj?.urls,
                    type: obj?.type,
                    numPages: obj?.numPages,
                    src: obj?.src
                  });
                } else {
                  fileSrcList.push({});
                }
              });
              this.$set(item, "fileSrcList", fileSrcList);
              console.log('文件列表', this.tableData)
            }
          });
          // this.addblankmet();
          this.resetActionBar();
        }
      });
    },
    queryImgUrl(e, index) {
      // console.log(e);
      let that = this;
      let url = {};
      url = DocumentApi.fileDownload({ fileId: e }).then(async res => {
        if (res.data.type === "application/pdf") {
          let url = window.URL.createObjectURL(res.data);
          let numPages = 0;
          this.$set(that.srcX, index, { src: {}, numPages: 0, urls: "" });

          that.srcX[index].urls = await blobToBase64(res.data);
          that.srcX[index].src = pdf.createLoadingTask({
            url: this.srcX[index].urls,
            CMapReaderFactory
          });
          that.srcX[index].src.promise.then(pdf => {
            // this.srcX[index].numPages = pdf.numPages;
            this.$set(that.srcX[index], "numPages", pdf.numPages);
          });
          return {
            url: url,
            type: "application/pdf",
            numPages: numPages
          };
        } else {
          return {
            url: await blobToBase64(res.data),
            urls: window.URL.createObjectURL(res.data),
            type: "image/jpeg"
          };
        }
      })
      return url.then(res => {
        // console.log(res);
        return res;
      })
    },
    handleResponse(res, file, fileList) {
      if (res.success) {
        this.fileList = fileList
        this.fileIdList.push(res.data);
        this.$set(this.formData, 'reportFileIdList', this.fileIdList);
        // console.log(res, file, this.fileIdList);
        console.log(this.fileIdList)
        this.$message.success("上传成功");
        return file.url;
      } else if (res.success === false && res.errCode === 200) {
        this.$message.error(res.message);
      } else {
        this.$message.error("上传失败，请稍后再试");
      }
    },
    handleRemove(file) {
      let index = this.fileIdList.indexOf(file.response.data)
      if (index !== -1) {
        this.fileIdList.splice(index, 1)
        this.fileList.splice(index, 1)
      }
    },
    // 当前选择的时0总产量-1亩均产量
    categorySearch(i) {
      this.noselecttypestau = i.id;
      this.reportType = i.reportType;
      this.search();
    },
    details(e) {
      this.display = "block";
      this.formListData = { ...e };
      console.log('文件列表', this.formListData)
    },
    returnClose() {
      this.display = "none";
      this.formListData = {};
    },
    //查询可选鱼类品种
    queryFishVariety() {
      let params = {
        page: 1,
        size: 10000
      };
      FishVarietyApi.queryPageByCondition(params).then(res => {
        this.FishVarietyData = res.data.content;
      });
    },
    //查询投塘人
    queryStaff() {
      StaffApi.queryByCondition().then(res => {
        this.staffList = res.data;
      });
    },
    queryEnum() {
      EnumApi.list({ enumType: "ReportType" }).then(res => {
        console.log(res);
        this.ReportTypeValue = res.data;
      });
    },
    //批次分类切换
    categoryChange(item) {
      this.status = item.status;
      this.getTableDataList();
    },
    selectAll(list) {
      let notvalue = true;
      list.forEach(item => {
        if (!item.storeHouseCode) {
          notvalue = false;
        }
      });
      if (notvalue === false) {
        this.$message.warning("不可选择空数据！");
      }
    },
    select(list) {
      let notvalue = true;
      list.forEach(item => {
        if (!item.storeHouseCode) {
          notvalue = false;
        }
      });
      if (notvalue === false) {
        this.$message.warning("不可选择空数据！");
      }
    },
    handleSelectionChange(list) {
      this.checkedIdList = [];
      let notvalue = true;
      let emptyList = [];
      this.checkedIdList = list.map(item => {
        if (item.storeHouseCode) {
          return item.storeHouseCode;
        } else {
          notvalue = false;
          emptyList.push(item);
          return "";
        }
      });
      if (notvalue === false) {
        // this.$message.warning("不可选择空数据！");
        this.toggleNoSelection(emptyList);
        return;
      }
      if (this.checkedIdList.length >= 1) this.delActive = true;
      else this.delActive = false;
    },
    // 单个删除
    delOne(row) {
      this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        
      })
        .then(() => {
          inspectionReportApi
            .delById({ id: row.checkReportId })
            .then(async res => {
              if (res.success === true) {
                // await DocumentApi.delList({
                //   idList: row.reportFileIdList
                // });
                this.$message.success("删除成功!");
                this.display = "none";
                this.search();
                this.resetActionBar();
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    save(formData) {
      this.$refs[formData].validate(valid => {
        if (valid) {
          if (this.nowChanceStau === "edit") {
            // 编辑接口
            // this.formData.routePointMapperList = this.tagsList;
            inspectionReportApi.edit(this.formData).then(res => {
              if (res.success) {
                this.$message.success("修改成功！");
                this.search();
                // this.closeDialog();
              } else {
                this.$message.error(res.message || "修改失败！");
              }
            });
          } else if (this.nowChanceStau === "add") {
            // this.formData.reportFileIdList = this.fileIdList;
            console.log(this.formData);
            inspectionReportApi.add(this.formData).then(res => {
              if (res.success) {
                this.$message.success("新增成功！");
                this.search();
                // this.closeDialog();
              } else {
                this.$message.error(res.message || "新增失败！");
              }
            });
          }
        } else {
          // console.log('error res.message || submit!!');
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.margin-top10px {
  margin-top: 10px;
}

.content-box {
  height: 90%;
  width: 100%;
  overflow-y: hidden;
  overflow-x: auto;
  display: flex;
  flex-direction: row;
  padding: 10px;
  flex-wrap: nowrap;

  .box-item {
    height: 470px;
    flex: 1;
    flex-wrap: wrap;
    flex-grow: 0;
    flex-shrink: 0;
    width: 540px;
    min-width: 580px;
    margin-right: 40px;
    box-sizing: border-box;
    // padding: 10px;
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
    border-radius: 8px;
    box-shadow: 0px 0px 6px 1px rgba(4, 128, 251, 0.5);

    .item-top {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      background-color: #d6ebfe;
      color: #000;
      position: relative;

      .item-i {
        position: absolute;
        width: 22px;
        height: 4px;
        background: #0480fb;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        top: 0;
      }
    }

    .item-left {
      height: calc(100% - 70px);
      margin: 10px;
      box-sizing: border-box;
      width: calc(60% - 20px);
      display: flex;
      justify-content: center;
      border: 1px solid #a1b2e2;
      align-items: center;

      img {
        width: auto;
        max-height: 100%;
        max-width: 100%;
      }

      .pdf {
        height: 100%;
        overflow: hidden;

        ::v-deep {
          span {
            margin-bottom: 20px;
          }
        }
      }
    }

    .item-right {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      height: calc(100% - 50px);
      width: 100%;
      overflow-y: auto;
      padding: 5px;
      padding-top: 10px;

      &::-webkit-scrollbar {
        width: 4px;
      }

      .img-box {
        width: 50%;
        padding: 5px;
        transition: all 0.3s;
        cursor: pointer;

        img {
          width: 100%;
          cursor: pointer;
          border: 1px solid #cecece;
        }

        .pdf {
          padding: 5px;
          width: 100%;
          height: 400px;
          cursor: pointer;
          border: 1px solid #cecece;
        }

        p {
          width: 100%;
          text-align: center;
          padding: 2px 10px;
          margin: 0;
          color: #000;
        }
      }

      .img-box:hover {
        transform: scale(1.05);
      }
    }
  }
}

.dialog-item {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
  background-color: #f8f8f8;
  padding: 20px;

  // display: none;
  .dialog-top {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #d6ebfe;
    color: #000;
    padding: 5px;
    position: relative;
    box-shadow: 0px 0px 6px 1px rgba(4, 128, 251, 0.5);

    .item-i {
      position: absolute;
      width: 22px;
      height: 4px;
      background: #0480fb;
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
    }

    span {
      margin-right: 10px;
    }

    .return {
      position: absolute;
      right: 95px;
    }

    .del {
      position: absolute;
      right: 15px;
    }
  }

  .dialog-box {
    height: calc(100% - 50px);
    width: 100%;
    display: flex;
    flex-direction: row;
    // width: 40%;
    overflow-x: auto;
    padding: 10px;
    padding-top: 20px;
    box-shadow: 0px 0px 6px 1px rgba(4, 128, 251, 0.5);
    background-color: #ffffff;

    &::-webkit-scrollbar {
      width: 4px;
    }

    // min-width: 100%;

    iframe {
      width: 100%;
      cursor: pointer;
    }

    .img-box {
      // width: 100%;
      height: 100%;
      margin-right: 40px;

      img {
        &:hover {
          // border-radius: 8px;
          box-shadow: 0px 0px 6px 1px rgba(4, 128, 251, 0.5);
        }

        box-shadow: 0px 0px 1px 1px rgba(4, 128, 251, 0.5);
        // height: calc(100% - 30px);
        height: calc(100% - 5px);
        width: auto;
        margin-bottom: 10px;
      }

      .pdf {
        display: flex;
        height: 100%;
        width: 100%;

        ::v-deep {
          span {
            display: inline-block;
            min-width: 400px;
            height: 100%;

            canvas {
              height: 100% !important;
            }
          }
        }
      }

      p {
        width: 100%;
        text-align: center;
        padding: 2px 10px;
        margin: 0;
        color: #000;
      }
    }
  }

  .dialog-box-img-box {
    width: 100%;
    height: 700px;

    iframe {
      width: 100%;
      height: 700px;
    }

    img {
      cursor: pointer;
    }

    a {
      display: block;
      width: 100%;
      height: 100%;

    }
  }
}

.reportName {
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
</style>
